<template>
	<!-- https://rqo61u.axshare.com/#g=1&p=%E8%B4%A2%E5%8A%A1%E8%AE%BE%E7%BD%AE_
    -->


	<!-- https://doc.apipost.net/docs/detail/2fb8a03e0466000?target_id=3b8b65df7d50ef -->
	<div class="app-container">
		<div class="info-content">
			<div class="el-card__body">
				<el-row class="form">
					<el-col :span="8">
						<el-form ref="form" label-width="140px">
							<el-form-item label="提现银行开户行:" required>
								<el-input v-model="form.bank_name"></el-input>
							</el-form-item>
							<el-form-item label="银行卡号:">
								<el-input v-model="form.bank_card_number"></el-input>
							</el-form-item>
							<el-form-item label="支付宝账号:">
								<el-input v-model="form.alipay_account"></el-input>
							</el-form-item>
							<el-form-item label="支付宝收款码:">
								<el-upload class="avatar-uploader" accept="image/*" :headers="headers"
									action="https://api.yhjerp.com/api/Platform/platform/uploads"
									:show-file-list="false" :before-upload="beforeUpload"
									:on-success="handleAvatarSuccess">
									<img v-if="form.alipay_receipt_image" :src="form.alipay_receipt_image"
										class="avatar" />
									<i v-else class="el-icon-plus avatar-uploader-icon"></i>
								</el-upload>
							</el-form-item>
							<el-form-item label="微信账号:">
								<el-input v-model="form.wechat_account"></el-input>
							</el-form-item>
							<el-form-item label="支付宝收款码:">
								<el-upload class="avatar-uploader" accept="image/*" :headers="headers"
									action="https://api.yhjerp.com/api/Platform/platform/uploads"
									:show-file-list="false" :before-upload="beforeUpload2"
									:on-success="handleAvatarSuccess2">
									<img v-if="form.wechat_receipt_image" :src="form.wechat_receipt_image"
										class="avatar" />
									<i v-else class="el-icon-plus avatar-uploader-icon"></i>
								</el-upload>
							</el-form-item>

							<el-form-item>
								<el-button type="primary" @click="onSubmit" icon="el-icon-position"
									class="lgm-search-btn">保存</el-button>
							</el-form-item>
						</el-form>
					</el-col>
				</el-row>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		personalAdmin,
		set_info
	} from "@/api/admin";
	import {
		getToken
	} from "@/utils/auth";

	let loadingInstance = null;
	let loadingInstance2 = null;
	import {
		Loading
	} from "element-ui";
	export default {
		data() {
			return {
				headers: {
					Authorization: `Bearer ${getToken()}`,
				},
				form: {
					form: "",
					bank_card_number: "",
					alipay_account: "",
					alipay_receipt_image: "",
					wechat_account: "",
					wechat_receipt_image: "",
				},
			};
		},
		mounted() {
			this.personalFn();
		},
		methods: {

			beforeUpload() {
				// 显示 loading
				loadingInstance = Loading.service({
					text: "上传...",
					background: "rgba(0, 0, 0, 0.7)", // 自定义 loading 背景色
				});
			},
			handleAvatarSuccess(res, file) {
				console.log(res)
				if (loadingInstance) {
					loadingInstance.close(); // 隐藏 loading
				}
				this.form.alipay_receipt_image = res.data;
				console.log(this.form.alipay_receipt_image)
				this.$forceUpdate()
			},
			beforeUpload2() {
				// 显示 loading
				loadingInstance2 = Loading.service({
					text: "上传...",
					background: "rgba(0, 0, 0, 0.7)", // 自定义 loading 背景色
				});
			},
			handleAvatarSuccess2(res, file) {
				if (loadingInstance2) {
					loadingInstance2.close(); // 隐藏 loading
				}
				this.form.wechat_receipt_image = res.data;
				this.$forceUpdate()
			},

			personalFn() {
				set_info({}, "GET").then((e) => {
					this.form = e.data;
				});
			},
			onSubmit() {
				set_info(this.form, "POST").then((e) => {
					this.$message("submit!");

				});
			},

		},
	};
</script>

<style scoped>
	.info-content {
		background-color: #fff;
		margin-bottom: 15px;
	}

	.form {
		display: flex;
		justify-content: center;
	}

	.avatar-wrap {
		display: flex;

		.avatar-btn {
			width: 115px;
		}

		.avatar-input {
			flex: 1;
		}
	}

	.el-card__body {
		.item {
			font-size: 18px;
			margin-bottom: 12px;

			.span {
				color: #909399;
			}
		}

		.line-2 {
			display: flex;

			p {
				width: 33%;
			}
		}

		.line-3 {
			display: flex;
			align-items: center;

			.company-name {
				width: 45%;
			}

			.btn {
				width: 45%;
			}
		}
	}

	.code-wrap {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.left-p {
			margin-top: 30px;
		}

		.right-p {
			margin: 6px 0;
		}
	}
</style>